<template>
	<te-card
		class="icon-card"
		click-able="true"
		v-on="$listeners"
	>
		<template #content>
			<div class="icon-img">
				<slot name="icon"></slot>
			</div>
			<div class="icon-description">
				<slot name="icon-description"></slot>
			</div>
			<div class="icon-do">
				<slot name='icon-do'></slot>
			</div>
		</template>
	</te-card>
</template>

<script>
	import TeCard from '@/components/TeUi/TeCard';

	export default {
		name: 'IconCard',
		components: {
			TeCard,
		},
		props: {
			icon: {
				type: String,
				default: '',
			},
		},
	};
</script>

<style scoped>
	.icon-card {
		transition: background-color 0.4s;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.icon-card:hover {
		cursor: pointer;
		background-color: rgba(129, 129, 129, 0.555);
	}
	.icon-img {
		width: 80px;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 10px;
		font-size: 3em;
		fill: #fff;
	}

	.icon-description {
		text-align: center;
		font-weight: 500;
	}
</style>
